<!-- 邮箱注册 -->

<template>
	<view class="loginBox">
		<view class="languane"></view>
		<view class="title_text">
			<view class="slogan_2" v-if="switchShow">
				<text>邮箱注册</text>
				<text class="switch" @click="switchMet">切换手机注册</text>
			</view>
			<view class="slogan_2" v-else>
				<text>手机注册</text>
				<text class="switch" @click="switchMet">切换邮箱注册</text>
			</view>
		</view>

		<view class="account_number" style="margin-top: 70rpx;">
			<text class="areaCode">+86中国</text>
			<input v-model.trim="account_numberValue" :placeholder="placeholder" class="account_number_value" />
			<!-- <text class="Switch">切换手机登录</text> -->
		</view>

		<view class="slider-verification"><uni-slider-verification @send="send"></uni-slider-verification></view>
		<uni-captcha ref="uni_captcha" class="captcha"></uni-captcha>
		<view class="account_number"><input type="text" v-model="username" placeholder="请设置您的昵称*" /></view>
		<view class="account_number">
			<input type="text" v-model="referrer" placeholder="请输入推荐人注册码*" />
			<text class="referrer_name">{{referrer_name}}</text>
		</view>
		<view class="btn"><text @click="next_step">下一步</text></button></view>
	</view>
</template>

<script>
import uniSliderVerification from '@/components/uni-slider-verification/uni-slider-verification';
import uniCaptcha from '@/components/uni-captcha/uni-captcha';
export default {
	components: { uniSliderVerification, uniCaptcha },
	name: 'reginstered',
	data() {
		return {
			username: '',
			referrer: '',
			referrer_name: '输入完成显示昵称',
			countdownNum: null,
			verification: '',
			account_numberValue: '',
			placeholder: '请输入您的手机号码',
			switchShow:false
		};
	},
	methods: {
		switchMet(){
			this.switchShow = !this.switchShow
			if(!this.switchShow){
				this.placeholder = "请输入您的手机号码"
			}else{
				this.placeholder = "请输入您的邮箱账号"
			}
		},
		send(n) {
			// console.log(this.$refs.uni_captcha);
		},
		next_step() {
			// this.$toast.loading({
			// 	message: '加载中...',
			// 	forbidClick: true
			// });
			let params = {
				phone: this.email,
				code: this.isRegister,
				type: 2
			};
			let par = {
				email: this.email,
				code: this.isRegister,
				type: 2
			};
			this.$api.number_erification(params).then(res => {
				if (res.code === 200) {
					this.$router.push({
						name: 'accountNumber',
						query: par
					});
				} else {
					this.$toast({
						message: res.msg
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.verification_code {
	font-size: 0.32rem;
	color: #68c2ff;
}
.loginBox {
	.title_text {
		color: $backColor;
		// margin-left: 40rpx;
		.switch {
			color: #5ca5d6;
			font-size: 24rpx;
			text-decoration: underline;
			margin-left: 40rpx;
		}
		.slogan_2 {
			font-size: 40rpx;
			display: block;
			margin-left: 68rpx;
			margin-top: 20rpx;
		}
	}
	.account_number {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0rpx 70rpx 0 70rpx;
		padding: 40rpx 0;
		border-bottom: 2rpx solid #ededed;
		.account_number_value {
			flex: 1;
			font-size: 32rpx;
			color: #c2c2c2 !important;
		}
		.Switch {
			color: #5ca5d6;
			font-size: 24rpx;
		}
		.referrer_name{
			color: #333330;
			font-size: 30rpx;
		}
		.areaCode{
			color: #5CA5D6;
			font-size: 30rpx;
			margin-right: 30rpx;
		}
	}
	.username {
		margin: 70rpx 70rpx 0 70rpx;
		border-bottom: 2rpx solid #ededed;
	}
	.slider-verification {
		margin: 0 50rpx;
		margin-top: 100rpx;
	}
	.captcha {
		margin-top: 30rpx;
	}
	.btn {
		margin: 200rpx 70rpx 0 70rpx;
		font-size: 40rpx;
		color: $backColor;
		text-align: center;
		text-decoration: underline;
	}
}

.languane {
	color: $backColor;
	font-size: 22rpx;
	text-align: right;
	padding: 70rpx;
}
</style>
